<template>
  <div class="register-column">
    <nav class="register-nav">
      <div class="flex items-center gap-3">
        <img src="./../assets/img/Avatar.jpg" class="flex-img">
        <span class="flex-span">萌宠互助</span>
      </div>
      <button class="!rounded-button text-amber-600 hover:text-amber-700 font-medium">
        已有账号？立即登录
        <i class="fas fa-arrow-right ml-2"></i>
      </button>
    </nav>
    <div class="register-row">
      <div class="img">
        <img src="../assets/img/register.jpg" alt="">
      </div>
  
      <el-form ref="registerForm"  :model="formData1" :rules="rules1"label-width="120px">
        <el-form-item label="用户名" prop="username" class="required label-center-align">
          <el-input v-model="formData1.username" type="text" clearable></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" class="required label-center-align">
          <el-input v-model="formData1.password" type="password" clearable></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone" class="label-center-align">
          <el-input v-model="formData1.phone" type="text" clearable></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email" class="required label-center-align">
          <el-input v-model="formData1.email" type="text" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">注册</el-button>
          <el-button type="danger" @click="clickRouter">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>

</template>

<script>
import { register } from '@/http/user'
export default {
  data() {
    return {
      formData1: {
          username: "",
          password: "",
          phone: "",
          email: "",
        },
      rules1: {
          username: [{
            required: true,
            message: '字段值不可为空',
          }, {
            pattern: /^[^一-龥]+$/,
            trigger: ['blur', 'change'],
            message: ''
          }],
          password: [{
            required: true,
            message: '字段值不可为空',
          },{ required: true, message: '请输入密码' },
          { min: 6, max: 12, message: '长度在 3 到 5 个字符' }],
          phone: [{
            pattern: /^[1][3-9][0-9]{9}$/,
            trigger: ['blur', 'change'],
            message: ''
          }],
          email: [{
            pattern: /^([-_A-Za-z0-9.]+)@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/,
            trigger: ['blur', 'change'],
            message: ''
          }],
        },
      departmentOption: []
    };
  },
  mounted() {
    
  },
  methods: {
   
    submitForm() {
      this.$refs.registerForm.validate(async (valid) => {
        if (valid) {
          const { code, data, message } = await register(this.formData1)
          if (code == '0') {
            this.$message.success('注册成功！');
            this.clickRouter()
          } else {
            this.$message.error(message);
          }
          // 这里执行注册逻辑
        } else {
          this.$message.error('注册信息校验失败！');
          return false;
        }
      });
    },
    clickRouter() {
      this.$router.push('/login')
    }
  }
};
</script>
<style lang="scss" scope>
.register-column{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100vh;

  overflow: hidden;
  .register-nav{
    background-color: #FFFAEB;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    display: flex;
    .text-amber-600 {
      color: #d97706;
    }
    .font-medium {
        font-weight: 500;
    }
    .\!rounded-button {
        border-radius: 4px !important;
    }
    [role=button], button {
        cursor: pointer;
        border:none;
    }
    .gap-3 {
      margin-left: 0.75rem;
    }
    .items-center {
        align-items: center;
    }

    .flex {
        display: flex;
        .flex-img{
          object-fit: cover;
          border-radius: 9999px;
          width: 3rem;
          height: 3rem;
        }
        .flex-span{
          color: #924001;
          font-weight: 700;
          font-size: 1.5rem;
          font-size: 1.5rem;
          line-height: 2rem;
        }
    }

  }
}
.register-row{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  .img{
    >img{
      width: 500px;
    }
  }
}
.register-container{
 
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  
}
</style>